<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="lib/mui.min.css" rel="stylesheet" />
	</head>
	<style>
		.msg_bd {
			margin-top: 44px;
			padding: 5px 10px
		}
		
		ul {
			margin: 0;
			padding: 0;
		}
		
		li {
			list-style: none;
			margin: 0;
		}
		
		p {
			margin: 0;
		}
		
		footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			border-top: 1px solid #D8D8D8;
			z-index: 999;
			background: #fff;
		}
		
		.inpu_bd {
			display: flex;
			flex-direction: row;
			height: 50px;
			line-height: 50px;
			padding: 0 10px;
			align-content: center;
			justify-content: center;
			padding-right: 0;
		}
		
		.inpu {
			height: 40px;
			line-height: 40px;
			margin: 5px 0px;
			border: 1px solid #D8D8D8;
			border-radius: 4px;
			margin-right: 10px;
			text-indent: 5px;
			overflow-x: scroll;
		}
		
		.inpu_rt button {
			height: 34px!important;
			margin-top: 8px;
		}
		
		.chat-thread {
			/*margin: 24px auto 0 auto;
  padding: 0 20px 0 0;*/
			list-style: none;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		
		.chat-thread li {
			position: relative;
			clear: both;
			display: inline-block;
			padding: 10px;
			margin: 0 0 20px 0;
			/* font: 16px/20px 'Noto Sans', sans-serif; */
			font-size: 16px;
			border-radius: 10px;
			background-color: rgba(25, 147, 147, 0.2);
		}
		
		.chat-thread li:before {
			position: absolute;
			top: 0;
			width: 40px;
			height: 40px;
			border-radius: 40px;
			content: '';
		}
		/* Chat - Speech Bubble Arrow */
		
		.chat-thread li:after {
			position: absolute;
			top: 15px;
			content: '';
			width: 0;
			height: 0;
			border-top: 15px solid rgba(25, 147, 147, 0.2);
		}
		
		.chat-thread li:nth-child(odd) {
			animation: show-chat-odd 0.15s 1 ease-in;
			-moz-animation: show-chat-odd 0.15s 1 ease-in;
			-webkit-animation: show-chat-odd 0.15s 1 ease-in;
			float: right;
			margin-right: 60px;
			color: #5A5A5A;
		}
		
		.chat-thread li:nth-child(odd):before {
			right: -60px;
			background-image: url(img/001.jpg);
		}
		
		.chat-thread li:nth-child(odd):after {
			border-right: 15px solid transparent;
			right: -15px;
		}
		
		.chat-thread li:nth-child(even) {
			animation: show-chat-even 0.15s 1 ease-in;
			-moz-animation: show-chat-even 0.15s 1 ease-in;
			-webkit-animation: show-chat-even 0.15s 1 ease-in;
			float: left;
			margin-left: 60px;
			color: #5A5A5A;
		}
		
		.chat-thread li:nth-child(even):before {
			left: -60px;
			background-image: url(img/cbd.jpg);
		}
		
		.chat-thread li:nth-child(even):after {
			border-left: 15px solid transparent;
			left: -15px;
		}
		
		.chat-window {
			position: fixed;
			bottom: 18px;
		}
		
		.chat-window-message {
			width: 100%;
			height: 48px;
			font: 32px/48px 'Noto Sans', sans-serif;
			background: none;
			color: #0AD5C1;
			border: 0;
			border-bottom: 1px solid rgba(25, 147, 147, 0.2);
			outline: none;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">私信</h1>
		</header>

		<section class="msg_bd">
			<ul class="chat-thread">
				<li class="">heheheheheheh</li>
				<li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>

			</ul>
		</section>
		<div style="text-align:center;clear:both;width: 100%;height: 50px;"></div>
		<footer>
			<div class="inpu_bd mui-row">
				<div class="inpu_lt mui-col-xs-1">
					<span class="mui-icon mui-icon-camera"></span>
				</div>
				<div class="inpu mui-col-xs-9" contenteditable="true">

				</div>
				<div class="inpu_rt mui-col-xs-2">
					<button class="mui-btn mui-btn-primary sends">发送</button>
				</div>
			</div>
		</footer>

		<script src="lib/mui.min.js"></script>
		<script type="text/javascript" src="lib/jquery-2.1.4.js"></script>
		<script type="text/javascript">
			mui.init();
			
			var wsUri = "ws://app.tianhuayun.net:8282?token=fcf1a0442ae36ef05821392fc85accf80131556c";
			var websocket = new WebSocket(wsUri);
			var output;


				
				websocket.onopen = function(evt) {
					onOpen(evt);
					console.log('onopen');
					return false;
				};
				
//				websocket.onclose = function(evt) {
//					onClose(evt)
//				};
				websocket.onmessage = function(evt) {
					onMessage(evt);
					console.log('onmessage');
					console.log(evt)
				};
				websocket.onerror = function(evt) {
					onError(evt)
				};

			function onOpen(evt) { 
		        console.log("CONNECTED"); 
		        doSend("WebSocket rocks"); 
		    }  
		 
		    function onClose(evt) { 
		        console.log("DISCONNECTED"); 
		    }  
		 
		    function onMessage(evt) { 
		        
		        websocket.close(); 
		    }  
		 
		    function onError(evt) { 
		        
		    }  
		 
		    function doSend(message) { 
		        console.log("SENT: " + message);  
		        websocket.send(message); 
		    }  
 
   
  
    
   $('.sends').click(function(){
   	 var message = $('.inpu').text();
   	 //console.log(message)
   		//onOpen(message)
   		websocket.send(message);
   		
   })
    
    
		</script>
	</body>

</html>